<ul
    class="contactItem-container"
    data-is-disabled="!UI.sortableState"
    data-as-sortable="itemContactDragControlListeners"
    data-ng-model="UI.items">

    <li
        class="contactItem-row"
        ng-if="!item.hide"
        ng-repeat="item in UI.items track by item.uuid"
        as-sortable-item>

        <div class="contactItem-sortable-wrapper ng-message-wrapper" as-sortable-item-handle>
            <label class="contactItem-label">
                <input
                    type="text"
                    placeholder="{{ UI.placeholder }}"
                    class="form-control"
                    ng-model="item.label"
                    ng-class="{ 'contactItem-label-editable' : UI.allowCustom, 'contactItem-label-selectable': UI.selectable }"
                    ng-change="setLabel(item)"
                    ng-readonly="!UI.allowCustom"
                    ng-required="UI.required"
                    ng-click="toggleSelector($event, item)">

                <i class="fa itemIcon" ng-class="UI.iconClass"></i>
                <i class="fa" ng-class="{'fa-chevron-down': !item.displaySelector, 'fa-chevron-up': item.displaySelector}" ng-click="toggleSelector($event, item)"></i>

                <ul class="contactItem-selectType" ng-show="item.displaySelector && UI.labels.length > 1">
                    <li ng-repeat="label in UI.labels track by $index" ng-class="{ selected: item.label.toUpperCase() === label.toUpperCase() }">
                        <a ng-click="setLabel(item, label)">{{ label }}</a>
                    </li>
                </ul>

            </label>

            <div class="contactItem-aside">

                <div class="contactItem-itemEdit">
                    <div class="contactItem-inputs">
                        <div class="pm_select" ng-if="UI.mode === 'select'">
                            <select
                                name="{{ ::UI.inputName }}"
                                placeholder="{{ UI.placeholder }}"
                                ng-model="item.value"
                                ng-change="change()"
                                ng-options="option as option.name for option in UI.options track by option.value"
                            >
                            </select>
                            <i class="fa fa-angle-down"></i>
                        </div>
                        <input
                            ng-if="UI.mode === 'singleLine'"
                            type="{{ ::UI.inputType }}"
                            name="{{ ::UI.inputName+$index }}"
                            data-valid-email
                            placeholder="{{ UI.placeholder }}"
                            class="form-control contactItem-field"
                            ng-attr-autofocus="{{::UI.autofocus}}"
                            ng-class="{ 'contactItem-input-with-icon': UI.inputType === 'email' }"
                            ng-model="item.value"
                            ng-change="change()">

                        <textarea
                            ng-if="UI.mode === 'multiLine'"
                            placeholder="{{ UI.placeholder }}"
                            class="form-control contactItem-field"

                            ng-model="item.value"
                            ng-change="change()"></textarea>

                        <contact-address-input
                            ng-if="UI.mode === 'address'"
                            data-focused="config.isFocusedAddress"
                            data-value="item.value"
                            data-form="form"></contact-address-input>

                        <contact-photo-row
                            ng-if="UI.mode === 'photo'"
                            data-value="item.value"
                            data-form="form"></contact-photo-row>
                    </div>

                    <div class="contactItem-actions">
                        <copy
                            ng-if="UI.mode === 'address' && !config.isFocusedAddress"
                            data-value="getAddressValue(item)"
                            pt-tooltip-translate="Copy address"
                            pt-tooltip-translate-context="Tooltip"></copy>

                        <button
                            ng-if="!UI.unique && visibleItems().length > 1"
                            type="button"
                            class="contactItem-delete"
                            data-action="remove"
                            data-index="{{ $index }}"
                            pt-tooltip-translate="Remove Entry"
                            pt-tooltip-translate-context="Action"></button>

                        <button
                            ng-if="!UI.unique && visibleItems().length"
                            type="button"
                            class="contactItem-add"
                            data-action="add"
                            pt-tooltip-translate="Add Entry"
                            pt-tooltip-translate-context="Action"></button>

                        <a
                            ng-if="UI.infoLink && UI.infoTooltip && $index === 0"
                            href="{{ ::UI.infoLink }}"
                            target="_blank"
                            class="text-purple">
                             <i
                                class="fa fa-info-circle contact-item-info"
                                pt-tooltip="{{ ::UI.infoTooltip }}"></i>
                        </a>
                        <i
                            class="fa fa-info-circle contact-item-info"
                            ng-if="!UI.infoLink && UI.infoTooltip && $index === 0"
                            pt-tooltip="{{ ::UI.infoTooltip }}"></i>

                        <advanced-settings-btn
                            class="contactItem-btn-settings"
                            ng-if="UI.inputType === 'email' && item.value"
                            data-contact="contact"
                            data-form="form"
                            data-model="item"></advanced-settings-btn>
                    </div>
                </div>

                <div
                    class="contactItem-validation"
                    ng-messages="form[UI.inputName+$index].$error"
                    role="alert">
                    <div class="ng-messages-errors">
                        <p ng-message="email" class="text-red"  translate-context="Error" translate>Invalid email</p>
                    </div>
                </div>
            </div>
        </div>
    </li>

    <div class="contactItem-footer">
        <button
            ng-if="UI.items.length > 1 && UI.sortable"
            type="button"
            data-action="toggleSortable"
            class="contactItem-toggle-sort">
            <span class="contactItem-toggle-sort-enable" translate translate-context="Action">Change order</span>
            <span class="contactItem-toggle-sort-save" translate translate-context="Action">Save order</span>
        </button>
    </div>
</ul>
